<%--
  Created by IntelliJ IDEA.
  User: Cecurio
  Date: 2017/12/14
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>书籍列表页面</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
    <style type="text/css">
        /* 单元格连续纯字母数字强制换行显示 */
        .wordwrap {
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
        }

        /* 超长文字单元格省略号显示 */
        .ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<table id="table_id" class="display">
    <thead>
    <tr>
        <th>bookId</th>
        <th>image</th>
        <th>isbn13</th>
        <th>价格</th>
        <th>summary</th>
        <th>书名</th>
        <th>url</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
    $(document).ready(function () {
        $("#table_id").dataTable({
            "bProcessing": false,                   // 是否显示取数据时的那个等待提示
            "bServerSide": true,                    //这个用来指明是通过服务端来取数据
            "sAjaxSource": "http://localhost:8090/api/book/datatable",      //这个是请求的地址
            "fnServerData": retrieveData,            // 获取数据的处理函数
            "language": {
                "emptyTable": "表格中没有数据~",
                "info": "显示 _START_ 到 _END_ 条数据 共 _TOTAL_ 条数据",
                "infoEmpty": "没有数据~",
                "infoFiltered": "(在 _MAX_ 条数据中查询)",
                "lengthMenu": "显示 _MENU_ 条数据",
                "search": "查询:",
                "zeroRecords": "没有找到对应的数据",
                "paginate": {
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "末页",
                    "first": "首页"
                }
            },
            "columns": [
                {
                    "data": "bookId",
                    "render": function (data, type, row, meta) {
                        return '' + data;
                    }
                },
                {
                    "data": "image",
                    "render": function (data, type, row, meta) {
                        return '<img src="' + data + '" alt="">';
                    }
                },
                {"data": "isbn13"},
                {
                    "data": "price",
                    "render": function (data, type, row, meta) {
                        return '' + data;
                    }
                },
                {
                    "data": "summary",
                    "class": "wordwrap ellipsis",
                    "render": function (data, type, row, meta) {
                        if (typeof data == 'string') {
                            if (data.length > 10) {
                                return data.substring(0, 10) + "...";
                            }
                        }
                        return data;
                    }
                },
                {
                    "data": "title"
                },
                {
                    "data": "url",
                    "render": function (data, type, row, meta) {
                        return '<a href="' + data + '"' + ' target="_blank">查看详情</a>';
                    }
                }
            ]
        });
    });

    // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
    function retrieveData(sSource, aoData, fnCallback) {
        $.ajax({
            url: sSource,                              //这个就是请求地址对应sAjaxSource
            data: {"aoData": JSON.stringify(aoData)},   //这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 ,分页,排序,查询等的值
            type: 'post',
            dataType: 'json',
            async: false,
            success: function (result) {
                console.log(result);
                fnCallback(result);                     //把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
            },
            error: function (msg) {
            }
        });
    }
</script>
</body>
</html>
